<template>
  <!-- 包含了最受欢迎组件和电影列表组件 -->
  <div class="content-wrap">
    <div>
      <ListRated />
      <ListMovies
        @addbs="addbs"
        ref="listmovies"
        @heightupdate="heightupdate"
      />
    </div>
  </div>
</template>

<script>
import ListRated from "./components/ListRated.vue";
import ListMovies from "./components/ListMovies.vue";
import BetterScroll from "better-scroll";

let bs;
export default {
  components: {
    ListRated,
    ListMovies,
  },
  methods: {
    addbs() {
      bs = new BetterScroll(".content-wrap", {
        scrollX: false,
        scrollY: true,
        // 保留子元素的点击事件
        click: true,
        // 表示这个滚动需要用到上拉加载
        // pullUpLoad: true,
        pullUpLoad: {
          threshold: 100,
        },
      });

      // 监听触底
      bs.on("pullingUp", () => {
        // console.log("已经拉到底了");
        // 触发子组件的事件
        this.$refs.listmovies.getMore();
      });
    },

    // 用来更新betterscroll的高度
    heightupdate(done) {
      bs.refresh();
      // 用来重启下一次的触底事件
      if (!done) {
        bs.finishPullUp();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content-wrap {
  // width: 100%;
  // height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
